<!-- <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>

<style>
    .test1{
        width:100px;
        height: 100px;
        background-color: #5C874A;
    }
    .test2{
        width:100px;
        height: 100px;
        background-color: #66D9B1;
    }
</style>

<script type="text/javascript">
    function myFunction(){
        var div = document.getElementById('test1');
        if(div.className.indexOf('test1') >= 0){
            div.className='test2';
        }else{
            div.className='test1';
        }
    }
</script>
</head>

<body>
    <div class="test1" id="test1" alt="" onclick="myFunction()">
    </div>
</body>
</html> -->


<!DOCTYPE html>
<!-- <html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>

<style>
    .test1{
        width:100px;
        height: 100px;
        background-color: green;
    }
</style>

<script type="text/javascript">
    function myFunction(){
        var test1 = document.getElementById('test1');
        if(test1.style.backgroundColor=='yellow'){
            test1.style.backgroundColor='green';
        }else{
            test1.style.backgroundColor='yellow';
        }
    }
</script>
</head>

<body>
    <div class="test1" id="test1" alt="" onclick="myFunction()">
    </div>
</body>
</html> -->

<!-- <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

<script type="text/javascript">
    function toggle(){
        var test1 = document.getElementById('test1');
        if(test1.src.indexOf('on') >= 0){
            test1.src="./images/off.png";
        }else{
            test1.src="./images/on.png";
        }
    }
</script>

    <img id="test1" src="./images/on.png" alt="" onclick="toggle()" />
</body>
</html> -->

<!-- <!DOCTYPE html>
<html style="font-size: 24px">
<head>
    <title>js点击按钮显示再点击空白地方隐藏</title>
    <style type="text/css">
        #div {
            border: 1px solid red;
            display: flex;
            align-items: center;
            justify-content: center;
            display: none;
            font-size: 2rem
        }
    </style>
</head>
<body>
    <div id="div">这是div的内容</div>
    <div id="div2">这是div2的内容</div>
    <button onclick="show()">点击我</button>
<script type="text/javascript">
    function show (event) {
        let oevent = event || window.event
        if (document.all) {
            oevent.cancelBubble = true
        } else {
            oevent.stopPropagation()
        }
        if (document.getElementById('div').style.display === 'none' || document.getElementById('div').style.display === '') {
            document.getElementById('div').style.display = 'block'
			document.getElementById('div2').style.display = 'none'
        } else {
            document.getElementById('div').style.display = 'none'
			document.getElementById('div2').style.display = 'block'
        }
    }
    document.onclick = function () {
        document.getElementById('div').style.display = 'none'
    }
    document.getElementById('div').onclick = function (event) {
        let oevent = event || window.event
        oevent.stopPropagation()
    }
    
</script>
</body>
</html> -->

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>RunJS</title>
<script src="js/jquery-3.5.0.js"></script>
</head>
<body>
	<script type="text/javascript">
	 $(function() {
	     $("#toggle").click(function() {
	        $(this).text($("#content").is(":hidden") ? "收起" : "展开");
	         $("#content").slideToggle();
	     });
	 });
	 </script>
<a href="#" id="toggle">展开</a>
<div id="content" style="display: none;"><p>隐藏内容<p><p>隐藏内容<p></div> 

<script>
$(function(){
	$('#d1').click(function(){

			if($('#d2').is(':hidden'))
			{
			  $('#d2').slideDown('slow');
			  $(this).text('收起');
			}else{
			  $('#d2').slideUp('slow');
			  $(this).text('展开');
				}

	});
});
</script>
<div id='d1'>展开</div>
<div id='d2' style=" display:none">内容</div>



<input type="button" value="显示baidiv1的内容du" id="btn" />
<div id="div1" style="display:none">div1</div>
<div id="div2" style="display:none">div2</div>
<div id="show-box"></div>
<script>
var div1=document.getElementById("div1");
var div2=document.getElementById("div2");
var btn=document.getElementById("btn");
var showBox=document.getElementById("show-box");

var flag=true;
btn.onclick=function(){
if(flag){
showBox.innerHTML=div1.innerHTML;
btn.value="显示div1的内容"
flag=false;
}
else{
showBox.innerHTML=div2.innerHTML;
btn.value="显示div2的内容"
flag=true;
}
}


var flag=true;
btn.onclick=function(){
if(flag){
div1.style.display="block";
div2.style.display="none";
btn.value="显示div1的内容"
flag=false;
}
else{
div2.style.display="block";
div1.style.display="none";
btn.value="显示div2的内容"
flag=true;
}
}
</script>
</body>
</html>